<template>
    <button :class="btnCls">
        <slot />
    </button>
</template>
<script setup>
import { computed } from "vue";
const props = defineProps({
  type: {
    type: String,
    default: "primary",
  },
});

const btnCls = computed(() => [
  "group relative flex justify-center rounded-md py-2 px-3 text-sm font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600",
  {
    "bg-indigo-600 hover:bg-indigo-500": props.type === "primary",
  },
  {
    "text-white": props.type !== "default",
    "hover:bg-gray-200 border-2": props.type === "default",
  },
]);
</script>